<template>
  <el-card>
    <el-upload
      :limit="1"
      :show-file-list="false"
      :file-list="[]"
      :http-request="beforeUpload"
      :headers="headers"
      :action="updateAvatarApi"
      multiple>
      <el-button type="primary">测试大文件上传</el-button>
    </el-upload>
    <h2 style="color: #F56C6C">保养颜色说明</h2>
    <div class="info-box">
      <div
        v-for="(value, name, index) in statusInfo"
        :key="index"
        :style="{ 'background-color': value }"
        class="line-info">
        <span>{{ name }}</span>
      </div>
    </div>
    <div v-for="i in 2" :key="i" class="status-box">
      <p>第 {{ i }} 个</p>
      <div class="status-list">
        <div
          v-for="item in 12"
          :key="item"
          :class="[item % 2 ? 'red':'green']"
          class="status-item">
          {{ item }}
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import eqpStatus from '@/api/maintenance/eqpStatus'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { UploadImage } from './upload'
export default {
  name: 'StatusOverview',
  components: {},
  mixins: [],
  props: {},
  data() {
    const statusInfo = {
      '带保养': '#E6A23C',
      '已保养': '#67C23A',
      '逾期': '#F56C6C'
    }
    return {
      statusInfo,
      headers: {
        Token: getToken()
      }
    }
  },
  computed: {
    ...mapGetters(['updateAvatarApi', 'baseApi'])
  },
  watch: {},
  created() {
    // this.initList()
  },
  mounted() {},
  methods: {
    beforeUpload(fileInfo) {
      const { file } = fileInfo
      Promise.all(new UploadImage(file).requestList).then(res => {
        console.log(res)
      }).catch((rej) => {
        console.log(rej)
      })
    },

    async initList() {
      const result = {}
      const res = await eqpStatus.getEqpStatus()
      res.data.map((ele, index) => {
        if (result[ele.eqpType]) {
          result[ele.eqpType].push(ele)
        } else {
          result[ele.eqpType] = [ele]
        }
      })
      console.log(result)
    }
  }
}
</script>

<style scoped lang="scss">
.el-card{
  border: 0;
  padding-bottom: 33px;
}
.info-box {
  display: flex;
  justify-content: flex-start;
  .line-info {
    width: 100px;
    padding: 6px 4px;
    text-align: center;
    color: #fff;
  }
}
.status-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  .status-item {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    border-radius: 2px;
    margin:0 20px 10px 0 ;
    text-align: center;
    line-height: 100px;
    font-size: 16px;
  }
  .green {
    background-color: #67C23A;
    color: #fff;
    border: 0;
  }
  .red {
    background-color: #F56C6C;
    color: #fff;
    border: 0;
  }
}
</style>
